<script setup>
import { reactive, ref } from 'vue';

  // 1.使用插值表达式示例
  // - 变量
  const message = "Welcome to China"
  // - 对象.属性
  const user = {
    name: "careathers",
    age: 18
  }
  // - 三元表达式/算数运算
  // - 函数调用/方法调用
  const fun = () => {
    return "Thank you"
  }
  // 2.数据响应式
  // - reactive
  const admin = reactive({
    userName: "root",
    password: "123456"
  })
  // - ref
  const words = ref("ref修饰的数据响应式")
</script>

<template>
<div>
  <h1>{{ message }}</h1>
  <p>My name is {{ user.name }}, I am {{ user.age }}years old.</p>
  <p>明年我就{{ user.age + 1}}岁了，是{{ user.age+1 >= 18 ? "成年人" : "未成年人" }}</p>
  <strong>方法的返回值是{{ fun() }}</strong><br>
  <i>第一行的{{ message }}是由{{ message.split(" ").length }}个单词组成的</i><br><br>
  <em>--下面是一些关于数据响应式在setup方法简写中的使用示例--</em>
  <p>管理员账户名:{{ admin.userName }}</p>
  <p>管理员账户密码：{{ admin.password }}</p>
  <p>{{ words }}</p>
</div>
</template>


<style scoped>

</style>

